<!--
 * @Author: boyyang
 * @Date: 2022-01-28 14:56:18
 * @LastEditTime: 2022-01-29 11:29:35
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\plugin\boyyangUI\colorSelector\index.vue
-->

<template>
    <div class="color-selector">
        <div class="color-selector-wrapper">
            <div
                class="default-color-box"
                v-for="(item, i) in props.colors"
                :key="i"
                :style="{ backgroundColor: item }"
                @click="defaultColorClick(item)"
            ></div>
            <div class="color-picker">
                <input type="color" @change="colorPickerChange" :value="props.selectedColor" />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
interface IColorSelectorProps {
    colors?: string[]; //默认颜色集合
    selectedColor?: string; //默认选中颜色
}

interface IColorSelectorEmits {
    (e: 'colorChange', color: string): void;
    (e: 'update:selectColor', color: string): void;
}

const props = withDefaults(defineProps<IColorSelectorProps>(), {
    colors: () => ['#ff2d51', '#f00056', '#70f3ff', '#44cef6'],
    selectedColor: '#0eb83a'
})

const emits = defineEmits<IColorSelectorEmits>()


const defaultColorClick = (color: string): void => {
    emits('colorChange', color)
}

const colorPickerChange = (e: any): void => {
    let color = e.target.value
    emits('update:selectColor', color)
    emits('colorChange', color)
}


</script>

<style scoped lang="scss">
.color-selector {
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.color-selector-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.default-color-box {
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    border: 4px solid whitesmoke;
    cursor: pointer;
}

.color-picker {
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    border: 4px solid whitesmoke;

    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;

    input {
        transform: scale(3);
    }
}
</style>

